<template>
<div style="margin: 10px 10px;">
    <el-card style="height: 640px; display: inline-block; width: 100%;">
      <!-- 菜单栏 -->
      <div class="top-tool-bar">
        <div style="float: left;">
          <el-input style="width: 200px; margin-right: 20px;" type="text" clearable placeholder="按部门名称搜索"></el-input>
          <el-button icon="el-icon-search" type="primary">搜索</el-button>
        </div>
        <div style="float: right;">
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="createHandle()">新增部门</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="data-table">
        <el-table
          height="500"
          stripe
          highlight-current-row
          v-loading="table.loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          :data="depaList">
          <el-table-column label="id" prop="id" min-width="100"></el-table-column>
          <el-table-column label="部门名称" prop="name" min-width="100"></el-table-column>
          <el-table-column label="启用" min-width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="()=>{}">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" fixed="right">
            <template slot-scope="scope">
              <div style="display: inline-block; margin-right: 10px;">
                <el-tooltip content="修改" placement="top">
                  <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="updatePlan(scope.row.id)"></el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                  <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="deletePlan(scope.row.id)"></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="bottom-page">
        <el-pagination
          :disabled="false"
          background
          @size-change="val => this.pagination.pageSize = val"
          @current-change="val => this.pagination.currentPage = val"
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import departments from '@/data/departments.js'

export default {
  name: 'DepartmentInfo',
  data () {
    return {
      depaList: departments,
      table: {
        loading: false
      },
      pagination: {
        total: 4,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20]
      },
      showDialog: false
    }
  }
}
</script>

<style scoped>
  .top-tool-bar {
    height: 56px;
  }
  .data-table {
    border: 1px gainsboro solid;
  }
  .bottom-page {
    height: 100%;
    margin: 10px auto;
  }
</style>
